<template>
  <div class="avatar-dropdown relative">
    <div class="user-name" :style="{ minWidth: '75px' }">
      <span class="hidden-xs-only">{{ username }}</span>
      <vui-icon class="vui-dropdown" :class="{ 'vui-dropdown-active': active }" icon="arrow-down-s-line" />
    </div>
    <ul class="dropdownMenu-ul rounded shadow-2xl text-center bg-white">
      <li v-if="getApps.length > 0">
        <div class="cursor-pointer text-gray-500 p-1">
          <vui-icon icon="apps-line" />
          <span>{{ translateTitle('Base.baseAdmin.应用选择') }}</span>
        </div>
        <!-- 二级菜单 -->
        <ul id="ref_apps_id" class="scrollbar--light absolute bg-white rounded shadow-2xl p-1 text-center border border-gray-300">
          <li v-for="(item, index) in getApps" :key="index">
            <div
              class="cursor-pointer text-gray-500 p-1 pr-0 flex items-center"
              :class="[item.active ? ' bg-blue-400 text-white' : '']"
              @click="item.active ? '' : handleCommand('switchApp', item)"
            >
              <vui-icon icon="apps-line" />
              <span>{{ item.APP_NAME }}</span>
            </div>
          </li>
        </ul>
      </li>
      <li v-if="pdaUrl">
        <div class="cursor-pointer text-gray-500 p-1">
          <vui-icon icon="smartphone-fill" />
          <span>{{ translateTitle('Base.baseAdmin.PDA系统') }}</span>
        </div>
        <!-- 二级菜单 -->
        <ul class="scrollbar--light absolute bg-white rounded shadow-2xl p-1 text-center border border-gray-300">
          <li>
            <div class="cursor-pointer text-gray-500 p-1 pr-0 flex items-center" @click="handleCommand('toPda')">
              <vui-icon icon="login-box-fill" />
              <span>{{ translateTitle('Base.baseAdmin.PDA登录') }}</span>
            </div>
            <!-- 三级菜单 -->
            <ul class="scrollbar--light absolute bg-white rounded shadow-2xl p-1 text-center border border-gray-300" style="left: -154px">
              <li class="flex">
                <div v-if="pdaDownloadUrl">
                  <div class="text-center">{{ translateTitle('Base.baseAdmin.PDA预览') }}</div>
                  <vue-qrcode :options="{ width: 140 }" :value="pdaQrcodeUrl" />
                </div>
              </li>
            </ul>
          </li>
          <li>
            <div class="cursor-pointer text-gray-500 p-1 pr-0 flex items-center">
              <vui-icon icon="android-fill" />
              <span>{{ translateTitle('Base.baseAdmin.APP下载') }}</span>
            </div>
            <!-- 三级菜单 -->
            <ul class="scrollbar--light absolute bg-white rounded shadow-2xl p-1 text-center border border-gray-300" style="left: -154px">
              <li class="flex">
                <div v-if="pdaDownloadUrl">
                  <div class="text-center">{{ translateTitle('Base.baseAdmin.PDA下载') }}</div>
                  <vue-qrcode :options="{ width: 140 }" :value="pdaDownloadUrl" />
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <div class="cursor-pointer text-gray-500 p-1" @click="handleCommand('changePassword')">
          <vui-icon icon="lock-line" />
          <span>{{ translateTitle('Base.baseAdmin.修改密码') }}</span>
        </div>
      </li>
      <li>
        <div class="cursor-pointer text-gray-500 p-1" @click="handleCommand('logout')">
          <vui-icon icon="logout-circle-r-line" />
          <span>{{ translateTitle('Base.baseAdmin.退出登录') }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import { computed, defineComponent, ref } from 'vue'
  import { useStore } from 'vuex'
  import request from '@/utils/request'
  import { useRouter } from 'vue-router'
  // import { toLoginRoute } from '@/utils/routes'
  import { translateTitle } from '@/utils/i18n'
  import VueQrcode from '@chenfengyuan/vue-qrcode'
  import { GFCD } from '@/utils/utils'
  export default defineComponent({
    name: 'VuiAvatar',
    components: { VueQrcode },
    setup() {
      const store = useStore()
      // const route = useRoute()
      const router = useRouter()
      const uid = computed(() => store.getters['user/uid'])
      const getApps = computed(() => store.getters['user/apps'])

      const logout = () => store.dispatch('user/logout')

      const pdaUrl = computed(() => store.getters['user/pdaUrl'])
      const pdaQrcodeUrl = ref('')
      const pdaDownloadUrl = ref('')
      if (pdaUrl.value) {
        request({
          url: GFCD('login', 'domain') + GFCD('login', 'baseUrl'),
          method: 'post',
          data: {
            data: JSON.stringify({
              '#LIMIT#': 1,
              '#PAGE_SIZE#': 50,
              APP_PARAMS_CN_DESC: '',
              APP_PARAMS_CODE: 'wms.pda.loginurl', //登录
            }),
            method: 'dams.app.conf.query',
          },
        }).then((data) => {
          let _val = data.data['dams.app.conf.query'].data[0].APP_PARAMS_VAL
          // pdaDownloadUrl.value = `${window.location.origin}:84/apk_download/CIMC_WMSV2_PDA_${_val}.apk`
          pdaQrcodeUrl.value = _val
          request({
            url: GFCD('login', 'domain') + GFCD('login', 'baseUrl'),
            method: 'post',
            data: {
              data: JSON.stringify({
                '#LIMIT#': 1,
                '#PAGE_SIZE#': 50,
                APP_PARAMS_CN_DESC: '',
                APP_PARAMS_CODE: 'wms.pda.download',
              }),
              method: 'dams.app.conf.query',
            },
          }).then((data) => {
            let _valDownload = data.data['dams.app.conf.query'].data[0].APP_PARAMS_VAL
            pdaDownloadUrl.value = _valDownload
            console.log(pdaQrcodeUrl.value, pdaDownloadUrl.value)
          })
        })
      }

      const active = ref(false)
      const handleVisibleChange = (val) => {
        active.value = val
      }
      const changePassword = () => {
        router.push({ path: '/resetPassword', query: { USER_ID: uid.value } })
      }
      const handleCommand = async (command, option) => {
        switch (command) {
          case 'logout':
            await logout()
            break
          case 'toPda':
            await store.dispatch('user/toPda')
            break
          case 'changePassword':
            await changePassword()
            break
          case 'switchApp':
            if (getApps.value.length > 1) {
              //第一步 清空当前应用缓存
              //第二步 跳转登录中心到apps页面 参数清空默认应用
              //第三步 切换到最新应用
              option.back = true
              console.log('option', option)
              await store.dispatch('user/switchApp', option)
            }
            break
          case 'warehouse':
            await store.dispatch('user/switchWarehouse', option)
            break
        }
      }
      // pdaQrcodeUrl.value = `${window.location.origin}:84`

      return {
        pdaUrl,
        active,
        handleCommand,
        translateTitle,
        handleVisibleChange,
        avatar: computed(() => store.getters['user/avatar']),
        username: computed(() => store.getters['user/username']),
        getApps: getApps,

        appId: computed(() => store.getters['user/appId']),
        pdaQrcodeUrl,
        pdaDownloadUrl,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;

    .user-avatar {
      width: 40px;
      height: 40px;
      margin-left: 15px;
      cursor: pointer;
      border-radius: 50%;
    }

    .user-name {
      position: relative;
      display: flex;
      align-content: center;
      align-items: center;
      // margin-left: 16px;
      cursor: pointer;
      padding: 10px 8px;
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.05);

      [class*='ri-'] {
        margin-left: 0 !important;
      }
    }
  }
  .avatar-dropdown:hover {
    .dropdownMenu-ul {
      display: block;
    }
  }
  .dropdownMenu-ul {
    display: none;
    position: absolute;
    top: 36px;
    min-width: 150px;
    max-width: 150px;
    right: 9px;
    border: 1px solid #dedede;
    span {
      width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    li {
      position: relative;
      ul {
        max-height: 400px;
        // overflow-y: scroll;
        display: none;
        top: 0;
        left: -188px;
        text-align: left;
      }
    }
    li:hover {
      background-color: #dedede;
      > ul {
        display: block;
      }
    }
  }
</style>
